<template>
  <div class="box">
    <div class="box-left">
      <dynamics-form
        ref="formRef"
        :model="model"
        :setting="setting"
        tips-placement="right"
      >
        <!-- <u-form-item>
          <u-button type="primary" class="m-r-1" @click="handleSubmit">
            提交
          </u-button>
          <u-button type="default" @click="handleReset">重置</u-button>
        </u-form-item> -->
      </dynamics-form>
    </div>
    <div style="width: 450px;">
      <tag />
    </div>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
import { DynamicsForm } from '@bairong/vix'
import tag from './step1Tag.vue'

export default {
  components: {
    DynamicsForm,
    tag
  },
  setup() {
    const formRef = ref(null)
    const setting = ref([
      {
        name: 'Name',
        label: '策略名称',
        type: 'input',
        rules: [{ required: true, message: '请输入用户姓名', trigger: 'blur' }]
      },
      {
        name: 'address',
        label: '创建人',
        type: 'input',
        disabled: true,
        rules: [{ required: true, message: '请输入公司地址', trigger: 'blur' }]
      },
      {
        name: 'address',
        label: '提出机构',
        type: 'input',
        disabled: true,
        rules: [{ required: true, message: '请输入公司地址', trigger: 'blur' }]
      },
      {
        name: 'type',
        label: '适用客群',
        type: 'select',
        options: [
          { value: 1, label: '寄件方付费' },
          { value: 2, label: '收件方付费' }
        ]
      },
      {
        name: 'type',
        label: '实时策略',
        type: 'select',
        disabled: true,
        options: [
          { value: 1, label: '寄件方付费' },
          { value: 2, label: '收件方付费' }
        ]
      },
      { name: 'remark', label: '策略说明', type: 'textarea' },
      {
        name: 'remark', label: '版本号', type: 'input', disabled: true
      }
    ])
    const model = reactive({
      userName: '',
      address: '',
      mobile: '',
      amount: '',
      type: 1,
      count: 1,
      isInsured: false,
      sendDate: '',
      getTime: '',
      city: '',
      packageTags: [],
      remark: ''
    })

    return {
      formRef,
      model,
      setting,
      handleSubmit: () => {
        formRef.value
          .validate()
          .then(() => {
            console.log(model)
          })
          .catch(() => {
            console.error('验证失败')
          })
      },
      handleReset: () => {
        formRef.value.resetFields()
      }
    }
  }
}
</script>

<style scoped>
.box {
  display: flex;
}
.box-left {
  width: 450px;
  margin-right: 15%;
}
</style>
